I'm having a few woes with Netscape 6 and CSS. I want to centre a <div> horizontally in the centre of the screen but it won't budge from the left hand side.
I want to do this using CSS and not by adding align="center" attributes because this will be an XHTML page.
How can this <div> be centred on the screen in NS6? Also, how can the <div> be made to fill the whole height of the screen like it does in IE?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<div class="centerdiv">
<div class="content">
text goes here.
</div>
<div>
</body>
</html>
ant specificy help u on that but if you download topstyle lite
http://www.bradsoft.com/topstyle/index.asp
it has a table whee you can select the browser you wna tit to be compativle with (+ an all safe table!) and you get all the options there.
An example of a 50% width div centered, with its height being the full rendering window:
jkd, that code does what you say but it still doesn't help me get my <div> centered. Is it possible to have a <div> with width 600px centred on the screen rather than have to use a relative width?
Help! This is driving me mad!
Hi
I just tried
<div align="center">text</div>
and this worked in NS6
oops sorry didn't read the whole thing!!!!! :(
I'm not sure if you can center exactly with CSS specs when using non-relative units.
px are perhaps the worst units to use for web pages (this is according to W3C), because they don't scale when someone has a 21" monitor at an ungodly resolution, and when someone has a 15" monitor at 800*600.
I always try using % and em units when designing nowadays because of this fact...
To center align block level elements with absolute widths, I think XHTML 1.0 and better are not your choice. Sorry. :(
Okay, thanks jkd. I thought that would be the case but wasn't sure. Back to the drawing board I suppose...
Simple answer:
<div style="text-align:center;">Content</div>
css
vertical-align:middle
should be valid for nn4 and up, but i haven't tried it.
this is a good source for css:
http://www.w3schools.com/css/css_reference.asp
:p
Originally posted by Roy Sinclair
Simple answer:
<div style="text-align:center;">Content</div>
That only centers inline elements inside the DIV. They want to center the DIV itself (which is a block-level element).
As for veritical-align, that is the vertical placement, and has nothing to do with centering horizontally. :)
...to center a DIV horizontally: position: relative; margin-left: auto; margin-right: auto;
MCookie is on to something there! I have amagend to acheive the look I was after but now have to get it looking the same in NS4.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
Originally posted by MCookie
...to center a DIV horizontally: position: relative; margin-left: auto; margin-right: auto;
Ah, tricky! I guess you do learn something new everyday. ;)
Thanks for sharing that. :)
Originally posted by jkd:
That only centers inline elements inside the DIV. They want to center the DIV itself (which is a block-level element).
I tested the code I posted, it works in IE, Netscape 4 and Mozilla 1.0 and worked as requested.
To reiterate:
<div style="text-align:center;">Content</div> does the trick. While you might think this should cause the text inside the div to be centered it actually centers the div itself within the containing block. :D
And since I'm posting... a follow up question: what's a good URL to learn about the "em" as opposed to px or %... I don't even know what "em" represents...
Yea I just realized someone showed this example like 3 posts up... now I remember where I learned this technique :o
sorry, just trying to help... forgot to check the second page heh